<div class="my-report">
    <h3>我的漏洞</h3>
    <!-- <div class="my-report-info">
        <div>有效性：<span>90%</span></div>
        <div>漏洞级别：<span>高危50%</span></div>
        <div>报告质量：<span>优秀赛季排名: 999+</span></div>
        <div>赛季积分：<span>633</span></div>
        <div>奖金：<span>10553</span></div>
    </div> -->
    <div class="my-report-filter">
        <div>
            <nz-select style="width: 120px;margin-right: 15px;" [(ngModel)]="page.status" (ngModelChange)='onChangeSearch()' nzAllowClear nzPlaceHolder="全部状态">
                <nz-option *ngFor="let status of statusDatas" nzValue="{{status?.v}}" nzLabel="{{status?.name}}"></nz-option>
            </nz-select>
            <nz-select style="width: 120px;margin-right: 15px;" [(ngModel)]="page.belongProject" (ngModelChange)='onChangeSearch()' nzAllowClear nzPlaceHolder="所属项目">
                <nz-option nzValue="" nzLabel="全部"></nz-option>
                <nz-option *ngFor="let project of projectsDatas" nzValue="{{project?.projectName}}" nzLabel="{{project?.projectName}}"></nz-option>
            </nz-select>
            <nz-select style="width: 120px;margin-right: 15px;" [(ngModel)]="selDate" (ngModelChange)='onChangeDate($event)' nzAllowClear nzPlaceHolder="本期数据">
                <nz-option nzValue="" nzLabel="全部"></nz-option>
                <nz-option *ngFor="let date of dateDatas;" [nzValue]="date" [nzLabel]="date?.name"></nz-option>
            </nz-select>
        </div>
        <p>
            <span class="green">已确认</span>
            <span class="yellow">待处理</span>
            <span class="blue">待审核</span>
            <span class="orange">重复</span>
            <span class="red">无效</span>
        </p>
        <div>
            <!-- <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
                <input type="text" nz-input placeholder="请输入要查找的漏洞" />
            </nz-input-group> -->
            <ng-template #suffixIconButton>
                <button nz-button nzSearch style="padding-left:20px;padding-right:20px;background:#141823;color:#fff;border-color:#141823"><i nz-icon type="search"></i></button>
            </ng-template>
        </div>
    </div>
    <div class="my-report-table">
        <nz-table
            #columnTable
            class="report-table"
            [nzSize]="small"
            [nzTotal]="page.pages"
            [nzPageIndex]="page.pageNo"
            nzPageSize="10"
            (nzPageIndexChange)="changeCurrentPage($event)"
            [nzFrontPagination]="false"
            [nzLoading]="tableLoading"
            [nzData]="dataList"
            [nzScroll]="{ x: '1420px' }"
        >
            <thead>
                <tr>
                    <th nzWidth="150px">漏洞标题</th>
                    <th nzWidth="150px">所属项目</th>
                    <th nzWidth="150px">厂商</th>
                    <th nzWidth="150px">提交时间</th>
                    <th nzWidth="100px">当前状态</th>
                    <th nzWidth="200px">星级</th>
                    <th nzWidth="80px">漏洞级别</th>
                    <th nzWidth="80px">报告质量</th>
                    <!-- <th nzWidth="100px">奖金</th> -->
                    <th nzRight="0" nzWidth="100px">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of columnTable.data">
                    <td>
                        <!-- <div class="title" [ngClass]='{red:data.status == "INVALID",orange:data.status == "REPETITIVE",yellow:data.status == "PENDING_AUDIT",green:data.status == "CONFIRMED",purple:data.status == "CREATED"}'> -->
                        <!-- <div class="title"> -->
                            {{ data.bugName }}
                        <!-- </div> -->
                    </td>
                    <td>{{ data.belongProject }}</td>
                    <td>{{ data.firmName }}</td>
                    <td>{{ data.createTime }}</td>
                    <td>
                        <p *ngIf='data.status == "CONFIRMED"' >已确认   <span class="green"></span></p> 
                        <p *ngIf='data.status == "CREATED"' >待处理<span class="yellow"></span></p>
                        <p *ngIf='data.status == "PENDING_AUDIT"' >审核中<span class="blue"></span></p>
                        <p *ngIf='data.status == "REPETITIVE"'>重复<span class="orange"></span></p>
                        <p *ngIf='data.status == "INVALID"'>无效<span class="red"></span></p>
                    </td>
                    <td><nz-rate [ngModel]="data.reportQualityStar" nzDisabled></nz-rate></td>
                    <td>{{ data.bugLevel | bugLevelPipe }}</td>
                    <td>{{ data.reportQuality | reportQualityPipe }}</td>
                    <!-- <td>2000元</td> -->
                    <td nzRight="0"><a [routerLink]='["/member/center/bugDetail"]' [queryParams]="{id: data.id}">查看</a></td>
                </tr>
            </tbody>
        </nz-table>
    </div>
</div>
